<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>单色影集</title>
	<link rel="stylesheet" href="/css/computer/index.css">
	<!-- 重置默认样式 -->
	<link rel="stylesheet" href="/css/resetcss.css">
	<style>

		/* 图片预览模态框 */
		.modal {
			display: none;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.9);
			z-index: 1000;
			justify-content: center;
			align-items: center;
			opacity: 0;
			transition: opacity 0.3s ease;
		}

		.modal.show {
			display: flex;
			opacity: 1;
		}

		.modal-content {
			position: relative;
			max-width: 90%;
			max-height: 90%;
		}

		.modal-img {
			max-width: 100%;
			max-height: 80vh;
			display: block;
			margin: 0 auto;
			border-radius: 8px;
			box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
		}
	</style>
</head>

<body>
	<div class="container-box">
		<div class="sidebar-box-left">
			<div class="sidebar">
				<div class="sidebar-header">
					<a href="#" class="user" id="user-center">个人中心</a>
					<a href="#" class="user" id="user-login">登录/注册</a>
				</div>
				<nav class="sidebar-nav">
					<ul>
						<a class="homepage">
							<li class="active">主页</li>
						</a><a href="" class="lifemoment">
							<li>生活瞬间</li>
						</a><a href="" class="tourlog">
							<li>旅行记录</li>
						</a><a href="" class="atlas">
							<li>精彩图集</li>
						</a>
					</ul>
				</nav>
			</div>
		</div>
		<div class="sidebar-box-right">
			<header>
				<div class="header-content">
					<h1>记录生活中的美好时刻</h1>
					<p class="subtitle">珍藏每一份感动，分享每一段旅程</p>
					<a href="#" class="btn">开始探索</a>
				</div>
			</header>

			<div class="container">
				
			</div>

			<!-- 图片预览模态框 -->
			<div class="modal" id="modal">
				<span class="close-btn" id="closeBtn">&times;</span>
				<div class="modal-content">
					<img class="modal-img" id="modalImg" src="" alt="">
					<div class="caption" id="caption">图片描述</div>
				</div>
			</div>

			<footer>
				<div class="footer-links">
					<a href="#">关于我们</a>
					<a href="#">联系方式</a>
					<a href="#">隐私政策</a>
					<a href="#">使用条款</a>
				</div>
				<p class="copyright">© 2023 美好时光记录 版权所有</p>
			</footer>
		</div>
	</div>
</body>


<script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
<script src="/configfile/config.js"></script>
<script src="/script/token.js"></script>
<script type="module">

	//window.__ENV__   这样来读取env环境变量里面公开出来的变量

	//获取导航的a标签，并设置href
	const homepageElement = document.querySelector('.homepage'); // 返回第一个匹配的节点
	const lifemomentElement = document.querySelector('.lifemoment'); // 返回第一个匹配的节点
	const tourlogElement = document.querySelector('.tourlog'); // 返回第一个匹配的节点
	const atlasElement = document.querySelector('.atlas'); // 返回第一个匹配的节点
	const userCenter = document.querySelector('#user-center');//获取个人中心DOM
	const userLogin = document.querySelector('#user-login');//获取登录注册DOM


	let server_ip = window.__ENV__.SERVER_IP;//服务器ip
	let home_ip = window.__ENV__.HOME_SERVER_IP;//首页ip
	homepageElement.href = home_ip;
	let life_ip = window.__ENV__.LIFEMOMENT_SERVER_IP;//生活瞬间
	lifemomentElement.href = life_ip;
	let tourog_ip = window.__ENV__.TOURLOG_SERVER_IP;//旅行记录
	tourlogElement.href = tourog_ip;
	let atlas_ip = window.__ENV__.ATLAS_SERVER_IP;//图片集
	atlasElement.href = atlas_ip;
	let user_ip = window.__ENV__.USER_SERVER_IP;//用户
	userCenter.href = user_ip;
	userLogin.href = user_ip;

	//获取令牌
	let token = localStorage.getItem("token");

	//获取jwt令牌状态
	let jwtState = getJwtState(token);


	if(jwtState.success){
		userCenter.style.display = "block";
		userLogin.style.display = "none";
	}else{
		userCenter.style.display = "none";
		userLogin.style.display = "block";
	}




</script>

</html>